<template>
  <div class="container">
    <h3>vue+openlayers: 动态添加layer到layerGroup,并动态删除</h3>
    <h4>
      <span v-for="(item, index) in pointData" :key="index">
        <el-button type="danger" v-show="item.isShow" size="mini" @click="removegpLayer(item)">删除{{ item.myname }}</el-button>
        <el-button type="primary" v-show="!item.isShow" size="mini" @click="addgpLayer(item)">新增{{ item.myname }}</el-button>
      </span>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import GroupLayer from 'ol/layer/Group'; // 图层组
import LayerVector from 'ol/layer/Vector'; // 矢量图层
import SourceVector from 'ol/source/Vector'; // 矢量数据源
import Feature from 'ol/Feature'; // 矢量要素
import Point from 'ol/geom/Point'; // 点要素
import Style from 'ol/style/Style'; // 样式
import Fill from 'ol/style/Fill'; // 填充样式
import Stroke from 'ol/style/Stroke'; // 边线样式
import Circle from 'ol/style/Circle'; // 圆形样式
export default {
  data() {
    return {
      map: null,
      pointData: [
        {
          myname: 'layer1',
          point: [116.397411, 39.909186],
          isShow: false
        },
        {
          myname: 'layer2',
          point: [114.397411, 38.909186],
          isShow: false
        }
      ],
      draw: null, // 绘制对象
      geoGroupLayer: new GroupLayer({
        layers: [],
        zIndex: 3,
        myname: 'geoGroupLayer'
      })
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let layer = new Tile({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        })
      })
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [layer],
        view: new View({
          center: [116.397411, 39.909186],
          zoom: 7,
          projection: 'EPSG:4326'
        })
      })
    },

    // 删除图层
    removegpLayer(data) {
      data.isShow = !data.isShow;
      this.geoGroupLayer.getLayers().getArray().forEach((layer, index, array) => {
        if (layer.get('myname') === data.myname) {
          array.splice(index, 1);
        }
      })
      this.map.removeLayer(this.geoGroupLayer); // 删除图层
      this.map.addLayer(this.geoGroupLayer); // 添加图层
    },

    // 新增图层
    addgpLayer(data) {
      this.map.removeLayer(this.geoGroupLayer); // 删除图层
      let pointFeature = new Feature({
        geometry: new Point(data.point)
      })
      let pointSource = new SourceVector({
        wrapX: false,
      })
      pointSource.addFeature(pointFeature); // 添加要素

      let vector = new LayerVector({
        myname: data.myname,
        source: pointSource, // 矢量数据源
        style: new Style({
          fill: new Fill({
            color: [255, 255, 255, 0.6] // 填充颜色 数组是rgba的色值
          }),
          stroke: new Stroke({
            color: '#ffcc33', // 边线颜色
            width: 2 // 边线宽度
          }),
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33'
            })
          })
        })
      })
      this.geoGroupLayer.getLayers().getArray().push(vector); // 添加图层
      data.isShow = !data.isShow; // 改变按钮状态
      this.map.addLayer(this.geoGroupLayer); // 添加图层
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 750px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 100%;
      height: 720px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>

